import React from 'react';
import bigDecimal from 'js-big-decimal';

import NumberFormatter, {
    NumberSettingFormatter,
    PercentSettingFormatter
} from '@/pages/SalaryManage/components/NumberFormatter';
import DateFormatter from '@/components/DateFormatter';

import salaryStyle from '@/pages/SalaryManage/salaryManage.less';
import EmptyPlaceHolder, { PLACE_HOLDER } from '@/pages/SalaryManage/components/EmptyPlaceHolder';

const commonColumn = config => ({
    render(text) {
        return <EmptyPlaceHolder value={text} />;
    },
    ...config
});

/**
 * 表格金额格式化配置，与amountSettingColumn基本相同，不同的点就是amountSettingColumn中的decimalPlaces来源于
 * 后台配置（来源于models中finance.js中的baseSetting.scale）
 * @param config
 * @param formatterConfig
 * @returns {*&{width: number, align: string, render(*): *}}
 */
const amountColumn = (config, formatterConfig) => ({
    width: 120,
    align: 'right',
    render(text) {
        return <NumberFormatter {...formatterConfig} value={text} className={salaryStyle.currency} />;
    },
    ...config
});

/**
 * 表格金额格式化配置，与amountColumn基本相同，不同的点就是amountSettingColumn中的decimalPlaces来源于
 * 后台配置（来源于models中finance.js中的baseSetting.scale）
 * @param config
 * @param formatterConfig
 * @returns {*&{width: number, align: string, render(*): *}}
 */
const amountSettingColumn = (config, formatterConfig) => ({
    width: 120,
    align: 'right',
    render(text) {
        return <NumberSettingFormatter {...formatterConfig} value={text} className={salaryStyle.currency} />;
    },
    ...config
});

const dateColumn = (config, formatterConfig) => ({
    align: 'left',
    width: 120,
    render(text) {
        return <DateFormatter value={text} emptyMessage={ PLACE_HOLDER } {...formatterConfig}/>;
    },
    ...config
});

const datetimeColumn = config => ({
    align: 'left',
    width: 120,
    render(text) {
        return <DateFormatter value={text} emptyMessage={ PLACE_HOLDER } pattern="YYYY-MM-DD HH:mm:ss" />;
    },
    ...config
});

const yearMonthColumn = config => ({
    align: 'left',
    width: 100,
    render(text) {
        return <DateFormatter value={text} emptyMessage={ PLACE_HOLDER } pattern="YYYY-MM" />;
    },
    ...config
});

const percentColumn = (config, percentConfig) => ({
    align: 'right',
    width: 100,
    render(text) {
        const value = text ? bigDecimal.multiply(text, 100) : null;

        return <NumberFormatter value={value} {...percentConfig} suffix="%" />;
    },
    ...config
});

const percentSettingColumn = (config, percentConfig) => ({
    align: 'right',
    width: 100,
    render(text) {
        return <PercentSettingFormatter value={text} {...percentConfig} suffix="%" />;
    },
    ...config
});


export {
    commonColumn,
    amountColumn,
    amountSettingColumn,
    dateColumn,
    datetimeColumn,
    yearMonthColumn,
    percentColumn,
    percentSettingColumn
};
